<template>
	<view class="order-content">
		<view class="bg-white u-m-b-30 ">
			<view class="order-view">
				<view class="u-flex-1">
					<view class="u-font-30 font-medium">
						{{demInfo.title}}
					</view>
					<view class="u-type-error align-right">
						￥<text class="u-font-30">{{demInfo.price}}</text>
					</view>
				</view>
			</view>
			<view class="">
				<u-cell-group :border="false">
					<u-cell-item title="服务地址" :arrow="false" :value="demInfo.address"></u-cell-item>
					<u-cell-item title="服务时间" :arrow="false" :value="demInfo.serve_time" :border-bottom="false"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view class="bg-white u-p-30">
			<view class="u-flex u-col-bottom u-row-between">
				<text class="u-font-30 font-medium">我的报价</text>
				<text class="u-font-20 u-light-color">平台代开发票</text>
			</view>
			<u-form ref="infoForm" :form="infoForm" label-width="auto">
				<u-form-item label-position="top" label="线下帮忙（1对1服务）">
					<view class="input-box u-flex-1 u-m-r-10">
						<text class="u-font-28 u-tips-color">￥</text>
						<view><u-line direction="col" color="#D9D9D9" margin="0 20rpx" length="42"></u-line></view>
						<u-input :placeholder="`${config.MIN_PRICE}~${config.MAX_PRICE}元`" type="digit" class="u-flex-1"
							v-model="infoForm.price" @blur="priceChange" />
					</view>
					<view class="u-light-color">
						实际收入：{{sPrice}}
						<text class="iconfont icon-tishi u-type-warning u-m-l-20" @click="rulePicker=true"></text>
					</view>
				</u-form-item>
				<u-form-item label="详细描述您的服务内容" prop="age" label-position="top" :border-bottom="false"
					:label-style="{fontWeight:600}">
					<u-input type="textarea" maxlength="500" height="354" v-model="infoForm.content" border :clearable="false"
						placeholder="请输入详细服务内容"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<!-- 规则 -->
		<u-popup v-model="rulePicker" mode="bottom" border-radius="20" closeable :safe-area-inset-bottom="true">
			<view class=" u-border-bottom" style="padding: 25rpx 35rpx;">
				<view class="u-font-30 ">
					平台定价规则
				</view>
			</view>
			<view class="u-p-30">
				手续费和税共10%
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			demId: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				infoForm: {
					price: '',
					content: ''
				},
				sPrice: '0.00',
				rulePicker: false,
				demInfo: {},
				config: this.$appConfig
			}
		},
		mounted() {
			this.queryDemInfo()
		},
		methods: {
			priceChange(value) {
				if (this.$u.test.range(Number(value), [this.$appConfig.MIN_PRICE, this.$appConfig.MAX_PRICE])) {
					this.$u.debounce(this.complatePrice, 500)
				} else {
					this.sPrice = '0.00';
					this.$u.toast(`请输入正确的报价，${this.$appConfig.MIN_PRICE}~${this.$appConfig.MAX_PRICE}元以内`)
				}
			},
			// 价格计算
			complatePrice() {
				this.$u.api.compulatePrice({
					price: this.infoForm.price
				}).then(res => {
					this.sPrice = res.real_price
				})
			},
			queryDemInfo() {
				this.$u.api.demandDetail(this.demId).then(res => {
					this.demInfo = res
				})
			},
			getData() {
				if (!this.infoForm.price) {
					this.$u.toast('请输入报价金额')
					return false
				}
				if (!this.$u.test.amount(this.infoForm.price)) {
					this.$u.toast('请输入正确的金额')
					return false
				}
				if (!this.$u.test.range(Number(this.infoForm.price), [this.$appConfig.MIN_PRICE, this.$appConfig.MAX_PRICE])) {
					this.$u.toast(`金额必须为${this.$appConfig.MIN_PRICE}~${this.$appConfig.MAX_PRICE}元以内`)
					return false
				}
				if (!this.infoForm.content) {
					this.$u.toast('请输入服务内容')
					return false
				}
				return this.infoForm
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-content {

		height: 100%;
	}

	.order-view {
		display: flex;
		padding: 28rpx;
		margin: 0 30rpx;
		border-radius: 20rpx;
		background: #F6F6F6;

		&:before {
			content: "";
			display: inline-block;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #999;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}
	}

	.input-box {
		height: 88rpx;
		background: #F6F6F6;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
	}
</style>